<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>task32</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <div class="left">
        <fieldset class="myField">
            <legend>类型</legend>
            <input type="radio" name="form1" id="input" checked>
            <label>输入框</label>
            <input type="radio" name="form1" id="radio">
            <label>单选框</label>
            <input type="radio" name="form1" id="checkbox">
            <label>多选框</label>
            <input type="radio" name="form1" id="select">
            <label>下拉框</label>
            <input type="radio" name="form1" id="textarea">
            <label>文本域</label>
        </fieldset>
        <fieldset class="myField">
            <legend>配置</legend>
            <label >名称：</label>
            <input type="text"  id="formName" value="输入框">
            <br>
            <input type="radio"  name='form2' id="necessary" checked>
            <label >必填</label>
            <input type="radio"  name='form2' id="unnecessary">
            <label >选填</label>
            <label >样式</label>
            <select id="formStyle">
                <option name="style1">样式一</option>
                <option name="style2">样式二</option>
            </select>
        </fieldset>
        <fieldset class="myField">
            <legend>规则</legend>
            <input type="radio" name="form3" id="text">
            <label>文字</label>
            <input type="radio"name="form3" id="number" >
            <laber>数字</laber>
            <input type="radio" name="form3" id="email">
            <laber>邮箱</laber>
            <input type="radio" name="form3" id="phone">
            <laber>电话号码</laber>
            <input type="radio" name="form3" id="password">
            <laber>密码</laber>
        </fieldset>
        <fieldset class="myField hide" id="lengthLimit">
           <legend>长度限制</legend>
            <label>字符限制</label>
            <input type="number" min="0" value="4" id="min_num">
            <span>---</span>
            <input type="number" min="1" value="16" id="max_num">
        </fieldset>

        <fieldset class="myField hide" id="selectForm">
            <legend>选项</legend>
            <input type="text" id="optText" placeholder="可用空格，逗号，回车来分隔选项">
            <div id="tags"></div>
        </fieldset>

        <input type="button" id="addBtn" value="add">
    </div>
    <div id="right">
        <span class="formSpan">表单展示区</span>
        <div id="formField">
            <form class="hide" id="right_form">
                <input type="button" id="btn" class="hide" value="提交">
            </form>
        </div>
    </div>
<script src="task32.js"></script>
</body>
</html>